<script setup>
import { useIndexStore } from "@/store/index"
import myHeader from "@/view/header/myHeader.vue"
import myNav from "@/view/nav/myNav.vue"

const indexState = useIndexStore()
</script>
<template>
	<div class="main">
		<header class="header">
			<myHeader></myHeader>
		</header>
		<section class="body">
			<nav
				class="nav"
				ref="nav"
				:style="{
					width: indexState.indexState.navWidth,
					opacity: indexState.indexState.navOpacity,
				}">
				<myNav></myNav>
			</nav>
			<section class="section">
				<router-view></router-view>
			</section>
		</section>
	</div>
</template>
<style scoped lang="scss">
.main {
	font-family: "剑修";
	color: $all-color;
	height: inherit;
	width: inherit;
	display: flex;
	flex-direction: column;
	background-color: $all-bg-color;
	cursor: default;
	.header {
		padding: 5px 150px;
		flex: 1;
		min-height: 80px;
		background-color: $all-bg-color;
		border-bottom: 1px solid #e6e6e6;
		display: flex;
	}
	.body {
		flex: 9;
		display: flex;
		overflow: auto;
		.nav {
			background-color: $all-bg-color;
			transition: all $animation-duration-05;
			display: flex;
		}
		.section {
			background-color: $all-bg-color;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			overflow: auto;
		}
	}
}
</style>
